<template>
	<div>
		<div>
			<scroller ref='scrollerEvents' lock-x >
				<div>
					<div class="textTile flex-h">

						<span class="sp1 flex1">多元智能测试</span>
						<span class="sp2"><b>{{tabNum}}</b><i>/8</i></span>
					</div>
					<div class="titleBlankBar">
						<div class="titleBar">
							<span>请就以下智能描述中选择您具备的能力，选中代表具备</span>

						</div>
					</div>
					<div v-for="(item,index) in dyznData.history" :key="index">
						<div class="textQuestions" v-show="item.isShow===tabNum">
							<div @click="clickSure(index,item)" class="flex-h questions"><span class="flex1">{{item.issue}}</span><img style="width: 0.4rem;height: 0.4rem;display: inline-block;"
								 :src="checkList.indexOf(index) !== -1 ?imgs2:imgs1" alt=""></div>
						</div>
					</div>
					<div class="commonBoxPre zyxq">
						<span class="sp3" @click="nextShow">下一组</span>
					</div>
					<div class="titleBlankBar" style="height: 2rem;"></div>
				</div>
			</scroller>
		</div>




	</div>
</template>

<script>
	import ls from 'store2';
	import dyznData from '~/static/json/dyzncs.json'
	import {
		Scroller
	} from 'vux'
	export default {
		props: {

		},
		components: {
			Scroller
		},
		data() {
			return {

				imgs1: require('~/static/images/search_icon_nor.png'),
				imgs2: require('~/static/images/search_icon_sure.png'),

				tabNum: 1,
				dyznData: dyznData,
				dyznScore: [0, 0, 0, 0, 0, 0, 0, 0],
				tabIndex: null,
				checkList: []
			};
		},
		computed: {

		},
		mounted: function() {

		},
		methods: {
			nextShow() {
				this.$nextTick(() => {
					this.$refs.scrollerEvents.reset({top: 0})
				})
				if (this.tabNum == 8) {
					this.$vux.loading.show({text:"正在拼命加载~"})
					let obj = {
						status: 4,
						worthScore: this.dyznScore
					}
					ls.set('resultPar', obj)
					if (ls.get('surplusVom') == '0') {
						this.commonJs.gosto('IndFreeResult')
					} else {
						this.commonJs.gosto('IndResult')
					}
					return false;
				}
				this.tabNum += 1
			
			
			},
			clickSure(index, state) {				
				if (this.checkList.indexOf(index) > -1) {
					let $index = this.checkList.indexOf(index)
					this.checkList.splice($index, 1)
					this.dyznScore[this.tabNum - 1] -= state.val1
				} else {
					this.checkList.push(index)
					this.dyznScore[this.tabNum - 1] += state.val1
				}
				
			},

	
		
		}
	};
</script>


<style scoped lang="less">

	.titleBar {
	
		width: 100%;
		height: auto;
		background: rgba(255, 247, 212, 1);
	
		padding: 0.2rem 0.05rem;
		box-sizing: border-box;
		line-height: 0.4rem;

		span {
			font-size: 0.24rem;
			font-family: 'PingFangSC-Semibold';
			font-weight: 600;
			color: rgba(34, 34, 34, 1);
		}
	}

	.titleBlankBar {
		width:100%;
		height: auto;
		position: relative;
	}

	.textTile {
		padding-bottom: 0.4rem;
		height: auto;
		width: 100%;
		// border-bottom: 0.01rem solid rgba(238, 238, 238, 1);

		.sp1 {
			font-size: 0.4rem;
			font-weight: bold;
			color: rgba(34, 34, 34, 1);
			line-height: 0.44rem;
		}

		.sp2 {
			b {
				font-size: 0.4rem;
				font-weight: bold;
				color: @mainColor;
			}

			i {
				font-size: 0.22rem;
				font-weight: bold;
				color: rgba(187, 187, 187, 1);
				// line-height:30px;
			}
		}
	}

	.textQuestions {
		width: 100%;
		height: auto;

		// padding-top: 0.3rem;
		.questions {
			padding: 0.2rem 0;
			box-sizing: border-box;
			border-bottom: 0.01rem solid rgba(229, 232, 237, 1);
		}

		span {
			font-size: 0.28rem;
			// font-weight: bold;
			color: rgba(34, 34, 34, 1);
			line-height: 0.45rem;
		}
	}

	.titlesDrag {
		width: 100%;
		height: 0.8rem;
		margin-top: 0.5rem;

		.sp1,
		.sp2 {
			font-size: 0.26rem;
			font-weight: bold;
			box-sizing: border-box;
			height: 0.8rem;
		}

		.sp1 {
			width: 1.5rem;
			padding-top: 0.4rem;
			color: rgba(82, 196, 26, 1);

		}

		.sp2 {
			padding-top: 0.2rem;

			color: rgba(187, 187, 187, 1);

		}
	}

	.titlesDrag1 {
		height: 0.4rem;
		margin-top: 0;
		font-size: 0.3rem;

		.sp1,
		.sp2 {
			height: 0.4rem;
			padding-top: 0;
			color: rgba(187, 187, 187, 1);
		}
	}

	.commonBox {
		position: absolute;
		width: 100%;
		height: 0.9rem;
		left: 0;
		bottom: 0.4rem;
		padding: 0 0.3rem;
		box-sizing: border-box;
	}

	.commonBoxPre {
		width: 100%;
		height: 0.9rem;
		margin-top: 0.5rem;
	}

	.zyxq {
		.sp1 {
			height: 0.9rem;
			border-radius: 0.1rem;
			border: 0.02rem solid rgba(238, 238, 238, 1);
			font-size: 0.3rem;

			font-weight: bold;
			color: rgba(34, 34, 34, 1);
			line-height: 0.9rem;
			text-align: center;
		}

		.sp3 {
			width: 6.1rem;
			height: 0.9rem;
			border-radius: 0.1rem;
			border: 0.02rem solid @mainColor;
			margin: 0 auto;
			display: block;
			line-height: 0.9rem;
			text-align: center;
			font-size: 0.3rem;
			// font-weight: bold;
			color: @mainColor;
		}

		span:nth-of-type(1) {
			margin-right: 0.2rem;
		}
	}
</style>

